import Color from 'color';

export const generateTheme = (color) => {
  const primaryColor = Color(color);
  const whiteColor = Color('#FFFFFF');
  const blackColor = Color('#000000');
  Array.from(window.frames).map(frame => {
    try {
      return frame.document.body;
    } catch (ignore) {// 跨域
      return false;
    }
  }).filter(Boolean).concat(document.body).forEach(body => {
    const bodyStyles = body.style;
    bodyStyles.setProperty('--color-primary', color);
    bodyStyles.setProperty('--color-primary-light-1', whiteColor.mix(primaryColor, 0.1).hex());
    bodyStyles.setProperty('--color-primary-light-2', whiteColor.mix(primaryColor, 0.2).hex());
    bodyStyles.setProperty('--color-primary-light-3', whiteColor.mix(primaryColor, 0.3).hex());
    bodyStyles.setProperty('--color-primary-light-4', whiteColor.mix(primaryColor, 0.4).hex());
    bodyStyles.setProperty('--color-primary-light-5', whiteColor.mix(primaryColor, 0.5).hex());
    bodyStyles.setProperty('--color-primary-light-6', whiteColor.mix(primaryColor, 0.6).hex());
    bodyStyles.setProperty('--color-primary-light-7', whiteColor.mix(primaryColor, 0.7).hex());
    bodyStyles.setProperty('--color-primary-light-8', whiteColor.mix(primaryColor, 0.8).hex());
    bodyStyles.setProperty('--color-primary-light-9', whiteColor.mix(primaryColor, 0.9).hex());
    bodyStyles.setProperty('--color-darken-primary-1', primaryColor.mix(blackColor, 0.1).hex());
    bodyStyles.setProperty('--color-darken-primary-2', primaryColor.mix(blackColor, 0.2).hex());
    bodyStyles.setProperty('--color-darken-primary-3', primaryColor.mix(blackColor, 0.3).hex());
  });
};

export const initTheme = () => {
  // const store = Store.getStore();
  // generateTheme(store.state.theme);
};
